<template>
	<view>
	<div class="pageHeader">
		<uni-nav-bar background-color="#39A6FF" :border="false" color="#fff" title="我的书签"></uni-nav-bar>
</div>
		<div class="pageHeaderPlace"></div>



		<!-- <view class="listBox">
			<view class="item" v-for="(item, index) in dataList" :key="item.id" @click="goDetail(item)">
				<text class="text" v-html="item.contentTitle"></text>

				<view class="icon">
					<uni-icons type="right" size="16"></uni-icons>
				</view>
			</view>
		</view> -->
		
		<view class="listBox">
			<view class="item" v-for="(item, index) in dataList" :key="index" @click="goDetail(item)">
				<view class="subTitle">
					<text class="tips">[{{item.category}}]</text>
					<text class="text" v-html="item.title"></text>
				</view>
				<view class="desc">
					<view style="flex: 3;" class="lineBreak">{{item.publishDept}}</view>
					<view style="flex: 3; text-align: right;">{{item.publishWordSize}}</view>
				</view>
			</view>
		</view>

		<view v-if='!onLoading && dataList.length == 0' class="placeText" style="padding-top: 20px;">
			暂无记录！
		</view>

		<view v-if="!onLoading && (total > 0) && (total < formData.pageIndex * formData.pageSize)" class="placeText">
			暂无更多!
		</view>


		<!-- 登录组件 -->
		<pageTabbar :page="2"></pageTabbar>
	</view>
</template>

<script>
	import {goLogin} from '@/utils/utils.js'
		import pageTabbar from '../../components/pageTabbar.vue'
	import {
		APIJS
	} from '../../api/api.js'
	export default {
		components: {
			 pageTabbar
		},
		data() {
			return {
				_freshing: false,
				dataList: [],
				formData: {
					"pageIndex": 1,
					"pageSize": 20
				},
				total: 0,
				onLoading: false,
				scrollToped: 0,
				triggered: false,
			}
		},

		onPullDownRefresh() {
			this.onRefresh().then(() => {
				uni.stopPullDownRefresh();
			})
		},
		onReachBottom() {
			this.lowerBottom()
		},
		
		mounted() {
			
		},

		onShow() {
			let vm = this
			vm.dataList = []
			
			// let token = uni.getStorageSync('token')
			// if (!token) {
			// 	goLogin('/pages/bookmark/bookmark')
			// 	return
			// }
			
			vm.getList().then(() => {
				vm.triggered = true;
			})
		},
		methods: {

			loginSuccess() {
				this.getList()
			},
		

			goDetail(item) {
				uni.navigateTo({
					url: `/pages/detail/detail?id=${item.contentId}&bookId=${item.id}`
				});
			},

			getList() {

				let vm = this
				vm.onLoading = true
				return new Promise((reslove) => {
					APIJS.getUserBookmarkList(this.formData).then((res) => {
						vm.dataList = [...vm.dataList, ...res.data.filter(x => x && x.id)]
						console.log(vm.dataList ,333)
						vm.total = res.count
						vm.onLoading = false
						reslove()
					}).catch((e) => {

						setTimeout(() => {
							console.log(e, 444)
							goLogin('/pages/bookmark/bookmark')
							uni.stopPullDownRefresh();
						}, 600)
					})
				})
			},
			onScroll(res) {
				// console.log(res)
				this.scrollToped = res.detail.scrollTop
			},
			onRestore() {
				this.triggered = 'restore'; // 需要重置
				console.log("onRestore");
			},
			// 下拉加载更多
			lowerBottom() {
				// console.log('lowerBottom')
				let vm = this
				if (vm.total > vm.formData.pageIndex * vm.formData.pageSize) {
					vm.formData.pageIndex++
					vm.getList()
				} else {
					// vm.noMore = true
				}
			},
			onRefresh() {
				let vm = this
				return new Promise((reslove) => {
					vm.dataList = []
					vm.formData.pageIndex = 1
					vm.getList().then((res) => {
						vm.triggered = false;
						vm._freshing = false;
						reslove()
					})
				})
			},
		}
	}
</script>

<style scoped lang="less">
	// .listBox {
	// 	padding-top: 10px; margin-top: 5px;
	// 	.item {
	// 		border-bottom: 1px solid #ebeef5;
	// 		line-height: 22px;
	// 		font-size: 16px;
	// 		display: flex;
	// 		padding: 10px 15px;
	// 		align-items: center;
	// 		justify-content: space-between;

	// 		.text {
	// 			flex: 1;
	// 			padding-right: 10px;
	// 		}

	// 		.icon {
	// 			width: auto;
	// 		}
	// 	}
	// }

.listBox {
	padding: 0 15px;
		.item {
			border-bottom: 1px solid #ebeef5;
			padding: 10px 0px;
			.subTitle{
				line-height: 22px; color: #333;
				font-size: 16px;
				.tips{
					color: #39A6FF;
				}
			}
			.desc{
				display: flex; color: #999; padding-top: 10px;
				font-size: 12px;
				align-items: center; gap: 10px;
				justify-content: space-between;
			}
	
			&:active {
				background-color: #f5f5f5;
			}
	
			.text {
				flex: 1;
				padding-right: 10px;
			}
	
			.icon {
				width: auto;
			}
		}
	}

	.placeText {
		text-align: center;
		line-height: 40px;
		font-size: 14px;
	}
</style>
